<template>
	<view class="hotel-list">
		<view class="u-flex item" v-for="(item, index) in list" :key="index" @click="kClick(item)">
			<image :src="item.mainImage" mode="" style="width: 180rpx;height: 180rpx;border-radius: 12rpx;"></image>
			<view class="r-c u-flex-1">
				<view class="title u-line-1">{{item.hotelName}}</view>
				<view class="u-line-2">{{item.address}}</view>
				<view class="">{{item.distance}}</view>
				<view class="u-flex">
					<view class="u-flex-1">{{hotelStar[item.hotelStar]}}</view>
					<view class="price">
						￥{{item.salePrice}}
						<text class="u-font-24">起</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dataJs from './constant.js'
	export default {
		props: {
			list: {
				default: () => [],
				type: Array
			}
		},
		data() {
			return {
				hotelStar: dataJs.hotelStar
			}
		},
		methods: {
			kClick(item) {
				this.$emit('onSuccess', item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.hotel-list {
		padding: 0 30rpx;
		.item {
			padding: 18rpx 0;
			border-bottom: 2rpx solid #F6F6F6;
		}
		.r-c {
			height: 180rpx;
			padding-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			min-width: 0;
			font-size: 25rpx;
			color: #969696;
		}
		.title {
			font-size: 30rpx;
			color: #262626;
		}
		.price {
			font-size: 35rpx;
			color: $u-type-warning;
		}
		
	}
	
</style>
